<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>msg:{{msg}}</p>
        <p>info:{{info}}</p>
        <!-- 计算属性，取值为function时，只能读取，不能赋值 -->
        <input type="button" value="为info赋值" @click="info='新info值'">
        <hr>
        <p>{{desc}}</p>
        <input type="button" value="为desc赋值" @click="desc='新desc值'">

        <!-- 页面逻辑简化 -->
        <p>pwd:{{ pwd }}</p>
        <div>
            <label for="pwd">密码：</label>
            <input type="text" id="pwd" v-model="pwd">
        </div>
        <div>
            <label for="email">邮箱：</label>
            <input type="text" id="email" v-model="email">
        </div>
        <div>
            <input type="button" value="注册" :disabled=" pwd.length<3||pwd.length>10 ">
            <!-- 页面存在过多的逻辑时， -->
            <input type="button" value="注册" :disabled="checkResult" />
        </div>
        <hr>
        <!-- 3、计算属性本身不会主动完成方法执行（结果缓存）就看成普通的属性
                 a、在页面中第一次完成vue实例装载时，此时计算属性会进行第一次执行
                 b、当计算属性的依赖变量发生变化时，计算属性会再次计算 -->
        <input type="text" @input="msg=$event.target.value">
        <p>计算属性：{{loadMsg}}</p>
        <p>计算属性：{{loadMsg}}</p>
        <p>计算属性：{{loadMsg}}</p>
        <p>计算属性：{{loadMsg}}</p>
        <p>普通方法：{{getMsg()}}</p>
        <p>普通方法：{{getMsg()}}</p>
        <p>普通方法：{{getMsg()}}</p>
        <hr>

        <p v-for="(p,index) in products" :key="index">
            <input type="checkbox" v-model="p.state">
            <span>{{p.name}}</span>
            <span>{{p.count}}</span>
            <span>{{p.price}}</span>
            <span>{{p.price*p.count}}</span>
        </p>
        <p>选中数：{{getCount}};合计：{{getSum}}</p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"变量名",
            pwd:"",
            email:"",
            products: [
                { id: 10001, name: "小米手机", count: 1, price: 3200 ,state:false},
                { id: 10002, name: "华为电脑", count: 1, price: 6400 ,state:false},
                { id: 10003, name: "晨光铅笔*12", count: 1, price: 16 ,state:false},
                { id: 10004, name: "羽绒服", count: 1, price: 600 ,state:false}
            ]
        },
        methods: {
            getMsg(){
                console.log(this.msg);
                return this.msg+"---"+Math.random();
            }
        },
        computed: {
            info:function(){
                return "计算属性info";
            },
            desc:{
                get(){
                    return "计算属性desc";
                },
                set(newValue){
                    console.log(newValue);
                    return newValue;
                }
            },
            checkResult:function(){
                if(this.pwd.length<6||this.pwd.length>10){
                    return true;
                }
                if(this.pwd.indexOf(".")!=-1){
                    return true;
                }
                if(this.email.length<3){
                    return true;
                }
                return false;
            },
            loadMsg(){
                console.log(this.msg);
                return this.msg+"---"+Math.random();
            },
            getCount(){
                let tempCount=0;
                this.products.forEach( (item) => {
                    if(item.state){
                        tempCount++;
                    }
                });
                return tempCount;
            },
            getSum(){
                let tempSum=0;
                this.products.forEach( (item) => {
                    if(item.state){
                       tempSum+=item.price*item.count
                    }
                });
                return tempSum;
            }
        },
    });
</script>
</html>